<template>
    <div class="demo">
         <hello></hello>
         <h1>{{num}}</h1>
         <h2>{{list}}</h2>
         <h1>{{message}}</h1>
         <ul>
            <li v-for="item,index in resList" :key="item.title">{{item.title}}</li>
         </ul>
         <h1>总计：{{total}}</h1>
         <button @click="add">num++</button>
         <div class="box" v-color>自定义属性</div>
         <p v-fontSize>自定义属性</p>
         <button @click="go">跳转</button>
         <!-- 使用子组件 -->
         <child :msg="msg" @abc="fn"></child>
          <!-- <child></child> -->
    </div>
</template>

<script setup>
// 把setup写在script的标签上 这种写法就做叫语法糖
// 组件不需要components注册，引入之后直接可以使用
  import hello from  '@/components/HelloWorld' 
  import child from  '@/components/child' 
  import {ref,reactive,toRefs,computed,onMounted,onUpdated} from 'vue'
  import {useRouter,useRoute} from 'vue-router'
  import {useStore} from 'vuex'
//   ref类型  不用return  直接在模版里面使用
  const num = ref(10)
  const list = ref([1,2,3,4,5])
  const msg = ref('我是父组件的数据')
//   reactive
  const data = reactive({
     obj:{
        name:'张三',
        bubby:'写代码，背面试题'
     },
     message:'我是vue3的语法糖',
     resList:[{title:'红楼梦',price:19.9,num:2},{title:'三国',price:19.9,num:3}]
  })
  console.log(toRefs(data));
  let {message,obj,resList} = toRefs(data)
console.log(data.message);
console.log(message.value);
// 方法不需要return    但是在script里面使用ref类型的数据 .value  reactive  data.
  const add = ()=>{
    num.value++
  }


//   计算属性
const total = computed(()=>{
    let sum=0
    data.resList.forEach(item=>{
       sum+=parseInt(item.price*item.num)
    })
    return sum
})

// 自定义指令

const vColor = {
    mounted(el) {
       console.log(el); 
       el.style.background = 'red'
    }
}
const vFontSize = {
    mounted(el){
       console.log(el); 
       el.style.fontSize = '30px'
       el.style.color = 'pink'
    }
}

// vue3的声明周期
onMounted(()=>{
    console.log('页面挂载之后');
})
onUpdated(()=>{
    console.log('更新之后');
})
// 使用路由
const router= useRouter()
const go = ()=>{
    router.push('/about')
}
// 获取路由的参数
const route = useRoute()
const id = route.params.id
console.log(id);

// 使用store
const store = useStore()
// ......
// 语法中得到组件传值


const fn = (val)=>{
   console.log(val)
}









</script>